<template>
  <div>
    <div class="purchaseorder" style="height: 78vh; overflow: auto">
      <Search :search="search" :reset="reset" :inline="true" style="padding: 0 10px">
        <template v-slot:body>
          <el-form-item>
            <el-button class="confirmBtn" type="success" @click="handlerchose">确认选择</el-button>
          </el-form-item>
          <el-form-item label="采购订单号" prop="fbillno" maxlength="5">
            <el-input v-model="query.fbillno" name="fbillno" clearable />
          </el-form-item>
          <el-form-item label="采购组织" prop="fownerid_name">
            <el-input v-model="query.fownerid_name" name="fownerid_name" clearable />
          </el-form-item>
          <el-form-item label="供应商编码" prop="fsupplierid_number">
            <el-input v-model="query.fsupplierid_number" name="fsupplierid_number" clearable />
          </el-form-item>
          <el-form-item label="供应商名称" prop="fsupplierid_name">
            <el-input v-model="query.fsupplierid_name" name="fsupplierid_name" clearable />
          </el-form-item>
          <el-form-item label="订单状态:" prop="state">
            <el-select v-model="query.state" clearable>
              <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
        </template>
      </Search>

      <div class="table-default-orderList" style="height: 65vh">
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          class="mt-3"
          style="height: 55vh; margin-bottom: 10px"
          @selection-change="handleSelectionChange"
          @select-all="handlerSelectAll"
          v-loading="loading"
          border
        >
          <el-table-column class="row-checkbox" type="selection" width="45" :selectable="checkSelectable" fixed="left" />
          <!-- <el-table-column prop="id" label="行号" /> -->
          <el-table-column prop="fbillno" label="采购订单" width="200" />
          <el-table-column prop="fbusinesstype" label="业务类型" width="90">
            <template #default="scope">
              <el-tag class="ml-2" type="success" v-if="scope.row.fbusinesstype == 'CG'">采购 </el-tag>
              <el-tag class="ml-2" type="primary" v-else>委外</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="fpurchaseorgid_name" label="采购组织名称" width="110" />
          <el-table-column prop="fsupplierid_name" label="供应商名称" width="180" />
          <el-table-column prop="fsupplierid_number" label="供应商编码" width="110" />
          <el-table-column prop="fmaterialid" label="品号" min-width="120" />
          <el-table-column prop="fmaterialname" label="品名" min-width="180" />
          <el-table-column prop="fmaterialmodel" label="规格" min-width="130" />
          <el-table-column prop="fdocumentstatus" label="单据状态" :formatter="formatter" width="100">
            <template #default="scope">
              <el-tag class="ml-2" type="warning" v-if="scope.row.fdocumentstatus == 0">{{ formatFdocumentstatus[scope.row.fdocumentstatus] }}</el-tag>
              <el-tag class="ml-2" type="success" v-else>{{ formatFdocumentstatus[scope.row.fdocumentstatus] }}</el-tag>
            </template>
          </el-table-column>

          <el-table-column prop="fforbidstatus" label="作废状态" min-width="100">
            <template #default="scope">
              <el-tag class="ml-2" type="success " v-if="scope.row.fforbidstatus == '未作废'">{{ scope.row.fforbidstatus }}</el-tag>
              <el-tag class="ml-2" type="warning" v-else>{{ scope.row.fforbidstatus }}</el-tag>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="fprovidercontactid" label="联系人" width="100" />
          <el-table-column prop="fproviderphone" label="联系电话" width="100" /> -->
          <el-table-column label="订单状态" prop="state" width="100" fixed="right">
            <template #default="scope">
              {{ stateFormatter[scope.row.state] }}
            </template>
          </el-table-column>
        </el-table>
        <Paginate :page-size="pageSize" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, toRaw, ref, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useGetList } from '/admin/composables/curd/useGetList'
import { useDestroy } from '/admin/composables/curd/useDestroy'
import { useOpen } from '/admin/composables/curd/useOpen'
import { setTableHeight } from '/admin/utils/setHeight.js'
import { ElMessage, ElTree, ElTable, ElTableColumn } from 'element-plus'

let router = useRouter()

const api = 'purchasing/popupList'

const pageSize = ref(100)

const { data, query, search, reset, loading, toraw } = useGetList(api)
const { destroy, deleted } = useDestroy()
const { open, close, title, visible, id } = useOpen()
query.value.state = '0'
const tableData = computed(() => data.value?.data)

console.log(tableData)

let emit = defineEmits(['send-data', 'send-query'])

const formatFdocumentstatus = {
  0: '未审核',
  1: '审核',
}

const formatter = (row, column, value, index) => {
  return {
    0: '未审核',
    1: '审核',
  }[value]
}

const stateFormatter = ref({
  0: '未做单',
  1: '已做单',
})
console.log(query)

let arr = ref([])
let multipleSelection = ref([])
let multipleTableRef = ref(null)

// 勾选订单
const handleSelectionChange = val => {
  arr.value = val
  // console.log('选中数组：', arr.value)
}

let options = ref([
  {
    label: '未做单',
    value: '0',
  },
  {
    label: '已做单',
    value: '1',
  },
  {
    label: '全部',
    value: '',
  },
])

const handlerchose = () => {
  // console.log('选中数组：',arr.value);
  if (arr.value.length > 0) {
    emit('send-data', arr.value)
  } else {
    ElMessage({
      message: '请选择对应采购订单',
      type: 'warning',
    })
  }
}

// 全选触发
let handlerSelectAll = options => {
  console.log(options)
  let flag = options.every(item => item.fsupplierid_number == options[0].fsupplierid_number && item.fpurchaseorgid_name == options[0].fpurchaseorgid_name)
  if (!flag) {
    ElMessage.warning('只能勾选同一采购组织和供应商！')
  }
  tableData.value.forEach(item => {
    console.log(item.fsupplierid_number, options[0].fsupplierid_number)
    if (item.fsupplierid_number !== options[0].fsupplierid_number || item.fpurchaseorgid_name != options[0].fpurchaseorgid_name) {
      multipleTableRef.value.toggleRowSelection(item, false)
    }
  })
}

let checkSelectable = row => {
  // 检查已选中的行中的number属性值是否一致
  if (arr.value.length > 0) {
    const firstSelectedNumber = arr.value[0].fsupplierid_number
    const firstSelectedName = arr.value[0].fpurchaseorgid_name
    return row.fsupplierid_number == firstSelectedNumber && row.fpurchaseorgid_name == firstSelectedName
  }
  return true
}

onMounted(() => {
  // console.log('触发了onmounted')
  search()
  deleted(reset)
  // setTableHeight('.table-default')
})
</script>


<style lang="scss">
// .el-table {
//   height: 85%;
// }
.el-form--inline .el-form-item {
  margin-bottom: 10px;
}
.table-default-orderList {
  padding: 5px;
}

.el-dialog__body {
  padding: 5px !important;
  height: 89%;
  overflow: auto;
}
</style>